<template>
  <div id="logo">
    <el-image style="width: 20%; height: 20%" :src="imgPrefix+'ciecleLogo.png'" :fit="fill"/>
    <el-text style="color:white;font-size: 20px">金粽子国际影城售票系统</el-text>
  </div>
  <div class="common-layout">
    <el-container>
      <div id="asideDiv">
        <el-aside width="500px" class="el-aside">
          <div class="block text-center">
            <el-carousel height="300px">
              <el-carousel-item>
                <el-image style="width: 100%; height: 100%" :src="imgPrefix+'loginCinema01.jpg'" :fit="fill"/>
              </el-carousel-item>
              <el-carousel-item>
                <el-image style="width: 100%; height: 100%" :src="imgPrefix+'loginCinema02.jpg'" :fit="fill"/>
              </el-carousel-item>
              <el-carousel-item>
                <el-image style="width: 100%; height: 100%" :src="imgPrefix+'loginCinema03.jpg'" :fit="fill"/>
              </el-carousel-item>
              <el-carousel-item>
                <el-image style="width: 100%; height: 100%" :src="imgPrefix+'loginCinema04.jpg'" :fit="fill"/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-aside>
      </div>

      <el-main>
        <div id="mainDiv">
          <el-text id="systemName">金粽子国际影城售票系统</el-text>
          <el-form
              ref="ruleFormRef"
              :label-position="labelPosition"
              label-width="auto"
              :model="user"
              :rules="rules"
              :size="'large'"
              style="max-width: 600px">
            <el-form-item label="用户名:" :label-position="itemLabelPosition" prop="username">
              <el-input v-model="user.username" :prefix-icon="User" size=""
                        placeholder="请输入用户名" clearable/>
            </el-form-item>
            <el-form-item label="密码:" :label-position="itemLabelPosition" prop="password">
              <el-input v-model="user.password" :prefix-icon="Lock" type="password"
                        placeholder="请输入密码" show-password/>
            </el-form-item>
            <el-form-item id="loginButtonItem">
              <div id="loginButton">
                <el-button type="primary" style="width: 100%;margin: 0 auto" @click="login">登 录
                </el-button>
                <el-button type="warning" style="width: 100%;margin: 0 auto" @click="toRegister">注 册
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import {ref, reactive, inject} from "vue";
import {User, Lock} from "@element-plus/icons-vue";
import SessionStorage from "@/SessionStorage.js";
// 图片前缀全局变量
const imgPrefix = inject('imgPrefix');

const user = reactive({
  username: "",
  password: "",
})

const labelPosition = ref('right')
const itemLabelPosition = ref('right')

const rules = reactive({
  username: [
    {required: true, message: '用户名不可为空！', trigger: ['blur', 'change']},
    {min: 3, max: 10, message: '用户名长度在3到10之间', trigger: ['blur', 'change']},
    {
      message: '用户名只能包含数字，大小写字母和下划线！',
      pattern: /^[0-9a-zA-Z_]{3,10}$/,
      trigger: ['blur', 'change'],
    }
  ],
  password: [
    {required: true, message: '密码不可为空！', trigger: ['blur', 'change']},
    {min: 3, max: 10, message: '密码长度在3到10之间', trigger: ['blur', 'change']},
  ]
})

// 表单提交
import {getCurrentInstance} from "vue";
import {ElNotification} from "element-plus";
import axios from "axios";
import qs from 'qs'
import {useRouter} from "vue-router";

const baseIp = import.meta.env.VITE_APP_API_URL;
const router = useRouter();
const {proxy} = getCurrentInstance();
const login = async () => {

  // 不使用ts拿到表单对象的写法（vue3官方不推荐这种写法）
  const formObj = proxy.$refs.ruleFormRef;
  console.log(user.username, user.password);
  // 按钮发送http请求之前的执行表单校验
  await formObj.validate((valid) => {

    if (valid) {
      // Promise
      // 后端响应统一格式：{"code":"200",msg:"success","data":null}
      axios.post(
          baseIp + ":9090/user/login",
          qs.stringify(user),
          {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
      ).then(res => {
        if ('200' === res.data.code) {
          // 清除旧的
          SessionStorage.removeItem("loginUser");
          // 插入新的
          SessionStorage.setItem("loginUser", res.data.data);
          ElNotification({
            type: 'success',
            message: res.data.msg
          })
          router.push({path: "/home"})
        } else {
          ElNotification({
            type: 'error',
            message: res.data.msg
          })
        }

      });
    } else {
      ElNotification({
        type: 'error',
        message: '用户名或者密码格式错误！'
      })
    }

  })
}
const toRegister = async () => {

  router.push({path: "/register"});
}
</script>
<style scoped>
#logo {
  display: flex;
  width: 500px;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

.common-layout {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.el-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;

}


#asideDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

#mainDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

#systemName {
  padding-bottom: 50px;
  font-size: 30px;

}

#loginButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

#loginButtonItem {
  height: 100%;
  width: 100%;
}

</style>